<template>
  <div
    v-show="show"
    class="TemporaryGroup"
    :style="{
      width: `${layout.width}px`,
      height: `${layout.height}px`,
      transform: `translate(${layout.x}px, ${layout.y}px)`,
      zIndex: `${layout.zIndex}`,
    }"
  ></div>
</template>
<script>
import { defineComponent, computed, watch } from 'vue';
import { useNodeTreeStore } from 'src/stores/nodeTree';
export default defineComponent({
  name: 'TemporaryGroup',
  setup() {
    const nodeTreeStore = useNodeTreeStore();
    const layout = computed({
      get() {
        return nodeTreeStore.temporaryGroup.layout;
      },
      set(val) {
        nodeTreeStore.temporaryGroup.layout = val;
      },
    });
    let childrenStartLayout = [];
    let start = {
      x: 0,
      y: 0,
      width: 0,
      height: 0,
    };
    watch(
      () => {
        return nodeTreeStore.temporaryGroup.children.length;
      },
      (val) => {
        if (val) {
          childrenStartLayout = nodeTreeStore.temporaryGroup.children.map((node) => {
            return { ...node.layout };
          });
          start = {
            x: layout.value.x,
            y: layout.value.y,
            width: layout.value.width,
            height: layout.value.height,
          };
        }
      },
    );
    watch(
      () => nodeTreeStore.moving,
      () => {
        if (!nodeTreeStore.moving) {
          childrenStartLayout = nodeTreeStore.temporaryGroup.children.map((node) => {
            return { ...node.layout };
          });
          if (layout.value) {
            start = {
              x: layout.value.x,
              y: layout.value.y,
              width: layout.value.width,
              height: layout.value.height,
            };
          }
        }
      },
    );
    watch(
      () => layout.value,
      () => {
        if (!nodeTreeStore.temporaryGroup.show) return;
        if (!nodeTreeStore.temporaryGroup.children.length) return;
        if (!childrenStartLayout.length) return;
        if (!nodeTreeStore.moving) return;
        nodeTreeStore.temporaryGroup.children.forEach((node, i) => {
          // 计算子元素位置比例
          let childXRatio = (childrenStartLayout[i].x - start.x) / start.width;
          let childYRatio = (childrenStartLayout[i].y - start.y) / start.height;
          let childWidthRatio = childrenStartLayout[i].width / start.width;
          let childHeightRatio = childrenStartLayout[i].height / start.height;
          // 根据比例计算子元素位置
          let childXNew = Math.round(layout.value.x + childXRatio * layout.value.width);
          let childYNew = Math.round(layout.value.y + childYRatio * layout.value.height);
          let childWidthNew = Math.round(childWidthRatio * layout.value.width);
          let childHeightNew = Math.round(childHeightRatio * layout.value.height);
          // 更新子元素位置
          node.layout.x = childXNew;
          node.layout.y = childYNew;
          node.layout.width = childWidthNew;
          node.layout.height = childHeightNew;
        });
      },
      // { deep: true },
    );
    const show = computed(() => nodeTreeStore.temporaryGroup.show);
    return {
      layout,
      show,
    };
  },
});
</script>
<style scoped lang="scss">
.TemporaryGroup {
  background-color: hsla(210, 88%, 44%, 0.2);
  // // backdrop-filter: blur(8px);
  position: absolute;
  top: 0;
  left: 0;
  // border: 1px solid $primary;
  // z-index: 999;
}
</style>
